<!--
 * @Description: 模型加载过渡动画
 * @FilePath: \hk-computerRoom-Security\src\views\home\component\loading.vue
 * @Date: 2024-02-02 15:29:56
 * @LastEditTime: 2024-02-02 15:55:12
-->
<template>
	<div id="loading-mark" v-if="props.loading">
		<div class="loading-box">
			<div class="loading">
				<img src="../../../assets/images/home/threeD/loading.svg" />
				<div class="progress-txt">
					当前模型已加载 <b>{{ props.percentage }}</b> %
				</div>
				<div class="loading-txt">模型文件首次加载时间较长请耐心等待.....</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	percentage: {
		type: Number,
		default: 0,
	},
	loading: {
		type: Boolean,
		default: false,
	},
});
</script>
<style scoped lang="scss">
#loading-mark {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	.loading-box {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: opacity 0.3s;
		background-color: rgb(0 0 0 / 64%);

		.loading {
			width: 320px;
			height: 120px;
			text-align: center;
		}
		.progress-txt {
			font-size: 18px;
			font-weight: bold;
			color: #327cec;
			b {
				color: #9dadba;
			}
		}
		.loading-txt {
			margin-top: 10px;
			text-align: center;
			font-size: 14px;
			color: #327cec;
			font-weight: bold;
		}
	}
}
</style>
